import { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  Card,
  Button,
  Row,
  Col,
  Select,
  DatePicker,
  Input,
  Checkbox,
  Form,
  Tabs,
  message,
  InputNumber,
  Modal,
  Upload,
  Space,
} from 'antd';
import {
  PlusOutlined,
  ImportOutlined,
  ExportOutlined,
  LoadingOutlined,
  UploadOutlined,
  EyeOutlined,
  CloseOutlined,
  ExclamationCircleOutlined,
  SaveOutlined,
} from '@ant-design/icons';
import { connect, FormattedMessage, useIntl } from 'umi';
import VendorQuick from '../purchase/vendorQuick';
import moment from 'moment';
import UploadUtil from '@/components/UploadUtil';
import ImgQuick from '@/pages/admin/imgQuick';
import CateComp from '@/components/CategoryComponent';
import { EmpSelect, VendorSelect } from '@/components/FormItemSelect';
import request from '@/utils/request';
import PdfReader from '@/components/PdfReader';
import DocHelper from '@/components/DocHelper';
import QuickMenu from '@/components/QuickMenu';
import 'intro.js/introjs.css';
import 'intro.js/themes/introjs-modern.css';
import IntroJs from 'intro.js';
import NewGuider from '@/components/NewGuider';
import QuerySelect from '@/components/QuerySelect';

const { TabPane } = Tabs;
const { confirm } = Modal;
const apiURL = '/api/services/app/Part/';

const ViewPage = (props: any) => {
  const [loading, setLoading] = useState(false);
  const [loading2, setLoading2] = useState(false);
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [visible4, setVisible4] = useState(false);
  const [activeKey, setActiveKey] = useState('2');
  const [record, setRecord] = useState({ part: {id:0,drawFile:''}, partRev: {} });
  const [dataSource, setDataSource] = useState([]);
  const [optionPartRev, setOptionPartRev] = useState<any>([]);
  const [fileList, setFileList] = useState<any>([]);
  const [disabled, setDisabled] = useState(true);
  const [drawList ,setDrawList] = useState<any>([]);
  const [datas, setData] = useState<any>();
  const intl = useIntl();
  const formRef = useRef<any>();

  useEffect(() => {
    fetchDatas();

    const guider = localStorage.getItem('partGuide');
    if (!guider || guider !== 'ok') {
      startIntro();
    }
  }, []);

  const startIntro = () => {
    const intro1 = IntroJs('#root');
    intro1
      .setOptions({
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '结束',
      })
      .oncomplete(function () {})
      .onexit(function () {
        message.success('恭喜您已经学会了！🎉 🎉 🎉  ');
        localStorage.setItem('partGuide', 'ok');
      })
      .start();
  };

  const newGuider = () => {
    localStorage.removeItem('partGuide');
    startIntro();
  };

  const onFinish = (values: any) => {
    const part = values.part;
    const partRev = values.partRev;
    partEdit(part, partRev);
  };

  const partEdit = (part: any, partRev: any) => {
    part.warrantyDate = part.warrantyDate?.format('YYYY-MM-DD');
    setLoading(true);

    let act = 'Modify';
    if (part.id === 0 || !part.id) {
      act = 'New';
    }
    if (fileList) {
      const pics: string[] = [];
      fileList.forEach((element: any) => {
        pics.push(element.response.result);
      });
      part.ImageFileName = pics.toString();
    } else {
      part.ImageFileName = datas.ImageFileName;
    }
    if (drawList) {
      const draws: string[] = [];
      drawList.forEach((element: any) => {
        draws.push(element.response.result);
      });
      part.DrawFile = draws.toString();
    } else {
      part.DrawFile = datas?.DrawFile;
    }
    request(apiURL + act, {
      method: 'POST',
      data: part,
    }).then((response) => {
      if (response) {
        if (response.success) {
          message.success('保存成功！');
          if (part.typeCode === 'M') {
            partRevEdit(part, partRev);
          }
          fetchDatas();
        }
        setLoading(false);
      }
    });
  };

  const partRevEdit = (part: any, partRev: any) => {
    if (part && partRev) {
      partRev.partNum = part.partNum;
      partRev.revisionNum = partRev.revShortDesc;
      partRev.effictivDate = partRev.effictivDate?.format('YYYY-MM-DD');
      let act = 'update';
      if (partRev.id === 0 || !partRev.id) {
        act = 'create';
      }
      request('/api/services/app/PartRev/' + act, {
        method: act === 'update' ? 'PUT' : 'POST',
        data: partRev,
      }).then((response) => {
        if (response) {
          if (response.success) {
            if (!response.result) {
              message.warning('物料版本号有重复！');
            }
          } else {
            message.error('物料版本保存错误，请联系管理员！');
          }
          setLoading(false);
        }
      });
    }
  };

  const fetchDatas = () => {
    setLoading(true);
    request(apiURL + 'getAll', {
      method: 'GET',
      params: { SkipCount: 0, MaxResultCount: 100 },
    }).then((response) => {
      if (response) {
        if (response.success) {
          const resp = response.result?.items;
          setDataSource(resp);
          setLoading(false);
        }
      }
    });
  };

  const setCurrent = (part?: any) => {
    request(apiURL + 'GetByPartNum', {
      method: 'GET',
      params: { partNum: part.PartNum },
    }).then((response) => {
      if (response) {
        if (response.success) {
          setRecord({
            part: response.result.data,
            partRev: response.result.data.Revs,
          });
          setActiveKey('1');
          setForm(response.result.data);
        }
      }
    });
  };

  const setForm = (part: any) => {
    if (part) {
      if (part.warrantyDate) part.warrantyDate = moment(part.warrantyDate);
      const fileList: any = [];
      if (part.imageFileName) {
        const pics = part.imageFileName.split(',');
        pics.forEach((element: any) => {
          const obj = {
            uid: element,
            name: element,
            response: {
              result: element,
            },
            status: 'done',
            url: UploadUtil.getOssFile + element,
          };
          fileList.push(obj);
        });
      }
      setFileList(fileList);

      const drawList: any = [];
      if (part.drawFile) {
        const items = part.drawFile.split(',');
        items.forEach((element: any) => {
          const obj = {
            uid: element,
            name: element,
            response: {
              result: element,
            },
            status: 'done',
            url: UploadUtil.getOssFile + element,
          };
          drawList.push(obj);
        });
      }
      setDrawList(drawList.length > 0 ? drawList : undefined);
      setData(part);
      formRef.current.setFieldsValue({ part });
      fetchRevs(part.partNum);
    }
  };

  const createNewPart = () => {
    setData({ id: 0 });
    setDisabled(false);
    formRef.current.setFieldsValue({ part: null });
    formRef.current.setFieldsValue({ partRev: null });
  };

  const closeModal2 = () => {
    setVisible2(false);
  };

  

  const fetchRevs = (partNum: string) => {
    request('/api/services/app/PartRev/getAllByPart', {
      method: 'GET',
      params: { partNum },
    }).then((response) => {
      const items = response.result;
      setOptionPartRev(items);
      setDisabled(false);
      const partRev = items[0];
      if (partRev) {
        if (partRev.effectiveDate) partRev.effectiveDate = moment(partRev.effectiveDate);
        if (partRev.approvedDate) partRev.approvedDate = moment(partRev.approvedDate);
      }
      formRef.current.setFieldsValue({ partRev });
    });
  };

  const createNewRev = () => {
    formRef.current.setFieldsValue({ partRev: null });
  };

  const handleRevChange = (value: any) => {
    const partRev = optionPartRev.filter((item: any) => item.revisionNum === value)[0];
    if (partRev) {
      if (partRev.effectiveDate) partRev.effectiveDate = moment(partRev.effectiveDate);
      if (partRev.approvedDate) partRev.approvedDate = moment(partRev.approvedDate);
    }
    formRef.current.setFieldsValue({ partRev });
  };

  const handleUploadList = (info: any) => {
    if (info.file.status === 'error') {
      message.error(info.file.response.error.message);
    }
    setFileList(info.fileList);
  };

  const handleUploadDraw = (info: any) => {
    if (info.file.status === 'done') {
      setDrawList(info.fileList);
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'removed') {
      setDrawList(undefined);
    }
  };

  const clickMultiFun = (val: string[]) => {
    val.forEach((element: any) => {
      const obj = {
        uid: element,
        name: element,
        response: {
          result: element,
        },
        status: 'done',
        url: UploadUtil.getOssFile + element,
      };
      fileList.push(obj);
    });
    setFileList(fileList);
    setVisible4(false);
  };

  const handlerExport = async () => {
    setLoading(true);
    const resp = await request('/api/Excel/ExportPart', {
      method: 'POST',
      responseType: 'blob',
    });

    const url = window.URL.createObjectURL(resp);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'part.xls';
    a.click();
    setLoading(false);
  };

  const delObj = () => {
    confirm({
      title: '警告',
      icon: <ExclamationCircleOutlined />,
      content: '删除后将不可恢复，确定删除？',
      onOk() {
        request(apiURL + 'DelBatch', {
          method: 'POST',
          data: [datas.id],
        }).then((response) => {
          if (response) {
            if (response.success) {
              formRef.current.resetFields();
            } else {
              console.log(response);
            }
          }
        });
      },
    });
  };

  const handlerImport = (info: any) => {
    if (info.file.status === 'done') {
      message.success('导入成功');
      setLoading2(false);
    } else {
      setLoading2(true);
    }
  };

  const doActive = () => {    
    if (datas?.id) {
      request(apiURL + 'DoActive', {
        method: 'POST',
        params: { partNum: datas.partNum },
      }).then((response) => {
        if (response.success) {
          setCurrent(response.result);
        } else {
          setCurrent(datas);
        }
      });
    }
  };

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };
  const optionPartRevItem = optionPartRev?.map((d: any) => {
    return (
      <Select.Option value={d.revisionNum} key={d.id}>
        {d.revisionNum}
      </Select.Option>
    );
  });
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div className="ant-upload-text">
        <FormattedMessage id="pages.upload" />
      </div>
    </div>
  );
  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <Form {...layout} ref={formRef} onFinish={onFinish}>
        <Space>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={createNewPart}
            data-step="1"
            data-intro="跟随小O来一步步创建物料吧，首先点击这里新增物料。"
          >
            <span>
              <FormattedMessage id="pages.new" />
            </span>
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            disabled={disabled}
            icon={<SaveOutlined />}
            data-step="8"
            data-intro="最后别忘了保存哦。"
          >
            <span>
              <FormattedMessage id="pages.save" />
            </span>
          </Button>
          <Upload
            accept=".xls,.xlsx,application/vnd.ms-excel"
            name="file"
            action="/api/Excel/ImportPart"
            headers={{
              Authorization: UploadUtil.accessToken,
            }}
            beforeUpload={UploadUtil.checkExcel}
            showUploadList={false}
            onChange={handlerImport}
          >
            <Button
              icon={<ImportOutlined />}
              loading={loading2}
              data-step="6"
              data-intro="可以批量导入物料，导入模板就是导出的Excel模板"
            >
              <span>
                <FormattedMessage id="pages.import" />
              </span>
            </Button>
          </Upload>
          <Button
            type="primary"
            icon={<ExportOutlined />}
            onClick={() => handlerExport()}
            loading={loading}
            data-step="7"
            data-intro="可以通过导出功能批量导出Excel格式的物料档案"
          >
            <span>
              <FormattedMessage id="pages.export" />
            </span>
          </Button>
          <Button
            danger
            icon={<CloseOutlined />}
            onClick={() => delObj()}
            disabled={disabled}
          >
            <span>
              <FormattedMessage id="pages.delete" />
            </span>
          </Button>
          <QuickMenu path="/part/partEntry" icon="icon-document" title="pages.PartEntry" />
          <DocHelper page="mm734u" />
          <NewGuider callback={() => newGuider()} />
        </Space>
        <Card style={{ marginTop: 8 }}>
          <Tabs defaultActiveKey="1">
            <TabPane tab={<FormattedMessage id="pages.detail" />} key="1">
              <Row gutter={[16, 16]}>
                <Col xs={24} sm={24} md={24} lg={15} xl={15}>
                  <Form.Item name={['part', 'id']} style={{ display: 'none' }}>
                    <Input />
                  </Form.Item>
                  <Form.Item
                    label={<FormattedMessage id="pages.partNum" />}
                    style={{ marginBottom: 0 }}
                  >
                    <Input.Group compact>
                      <Form.Item
                        name={['part', 'partNum']}
                        rules={[
                          { required: true, message: <FormattedMessage id="pages.partNum.required" /> },
                        ]}
                      >
                        <Input style={{ width: 138 }} />
                      </Form.Item>
                      <CateComp
                        layout="IUM"
                        width={100}
                        name={['part', 'ium']}
                        required={true}
                        rules={[
                          { required: true, message: <FormattedMessage id="pages.IUM.required" /> },
                        ]}
                        placeholder={<FormattedMessage id="pages.IUM" />}
                      />
                      <Form.Item name={['part', 'searchWord']}>
                        <Input placeholder="keywords" style={{ width: 100 }} />
                      </Form.Item>
                      <Form.Item>
                        <QuerySelect
                          width={680}
                          sysReportName="PartSearch"
                          text={<FormattedMessage id="pages.select" />}
                          title={<FormattedMessage id="pages.partNum" />}
                          btntype="primary"
                          setCurrent={setCurrent}
                          scroll={{ x: 'max-content', y: '200px' }}
                        />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>

                  <Form.Item
                    name={['part', 'partDescription']}
                    label={<FormattedMessage id="pages.partDescription" />}
                    rules={[
                      {
                        required: true,
                        message: <FormattedMessage id="pages.partDescription.required" />,
                      },
                    ]}
                  >
                    <Input.TextArea />
                  </Form.Item>
                  <Form.Item
                    name={['part', 'typeCode']}
                    label={<FormattedMessage id="pages.typeCode" />}
                  >
                    <Select
                      style={{ width: 200 }}
                      placeholder={<FormattedMessage id="pages.typeCode.select" />}
                    >
                      <Select.Option value="M">
                        <FormattedMessage id="pages.mType" />
                      </Select.Option>
                      <Select.Option value="P">
                        <FormattedMessage id="pages.pType" />
                      </Select.Option>
                    </Select>
                  </Form.Item>
                  <CateComp
                    layout="Part-ClassID"
                    width={200}
                    isTreeSelect={true}
                    name={['part', 'classID']}
                    label={<FormattedMessage id="pages.classID" />}
                  />
                  <CateComp
                    layout="Part-ProdCode"
                    width={200}
                    name={['part', 'prodCode']}
                    label={<FormattedMessage id="pages.group" />}
                  />
                  <Form.Item
                    name={['part', 'warrantyDate']}
                    label={<FormattedMessage id="pages.warrantyDate" />}
                  >
                    <DatePicker />
                  </Form.Item>
                </Col>
                <Col xs={24} sm={24} md={24} lg={9} xl={9}>
                  <Form.Item>
                    <Input.Group compact>
                      <Form.Item name={['part', 'inActive']} valuePropName="checked">
                        <Checkbox onChange={() => doActive()}>
                          <FormattedMessage id="pages.InActive" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['part', 'globalLock']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.globalLock" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['part', 'trackLots']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.TrackLots" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['part', 'dropShip']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.dropShip" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['part', 'nonStock']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.NonStock" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['part', 'buyToOrder']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.BuyToOrder" />
                        </Checkbox>
                      </Form.Item>
                      <Form.Item name={['part', 'noSuggest']} valuePropName="checked">
                        <Checkbox>
                          <FormattedMessage id="pages.NoSuggest" />
                        </Checkbox>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item>
                    <Input.Group compact>
                      <Form.Item data-step="2" data-intro="可以给物料上传图片">
                        <Upload
                          action={UploadUtil.uploadOSS}
                          headers={{
                            Authorization: UploadUtil.accessToken,
                          }}
                          data={{
                            objectId: record?.part?.id,
                            objectName: 'Part',
                            objectField: 'ImageFileName',
                          }}
                          listType="picture-card"
                          fileList={fileList}
                          multiple={true}
                          onChange={handleUploadList}
                        >
                          {fileList.length >= 6 ? null : uploadButton}
                        </Upload>
                      </Form.Item>
                      <Form.Item>
                        <Button onClick={() => setVisible4(true)}>
                          <FormattedMessage id="pages.select" />
                        </Button>
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item>
                    <Input.Group compact>                      
                      <Form.Item data-step="3" data-intro="在这里给物料上传PDF格式的图纸">
                        <Upload
                          action={UploadUtil.uploadOSS}
                          headers={{
                            Authorization: UploadUtil.accessToken,
                          }}
                          data={{
                            objectId: record?.part?.id,
                            objectName: 'Part',
                            objectField: 'DrawFile',
                          }}
                          fileList={drawList}
                          onChange={handleUploadDraw}
                          beforeUpload={UploadUtil.checkPdf}
                        >
                          <Button type="ghost" icon={<UploadOutlined />}>
                            <span>
                              <FormattedMessage id="pages.drawing.upload" />
                            </span>
                          </Button>
                        </Upload>
                      </Form.Item>
                      <Form.Item>
                        <PdfReader
                          url={UploadUtil.getOssFile + record?.part?.drawFile}
                          width={1024}
                          height={600}
                          text={
                            <span>
                              <FormattedMessage id="pages.Browse" />
                            </span>
                          }
                          icon={<EyeOutlined />}
                          disabled={!record?.part?.drawFile}
                        />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                </Col>
              </Row>
            </TabPane>
            <TabPane tab={<FormattedMessage id="pages.MRP Attribute" />} key="2">
              <Form.Item name={['part', 'maxnum']} label={<FormattedMessage id="pages.Stock(Max)" />}>
                <InputNumber />
              </Form.Item>
              <Form.Item name={['part', 'minnum']} label={<FormattedMessage id="pages.Stock(Min)" />}>
                <InputNumber />
              </Form.Item>
              <Form.Item name={['part', 'saftQty']} label={<FormattedMessage id="pages.safty.stock" />}>
                <InputNumber />
              </Form.Item>
              <EmpSelect
                required={false}
                width={200}
                name={['part', 'buyerID']}
                label={<FormattedMessage id="pages.default.buyer" />}
                showSearch
                params={{
                  deptCode: 'PD',
                }}
              />
              <Form.Item name={['part', 'minBuyQty']} label={<FormattedMessage id="pages.MOQ" />}>
                <InputNumber />
              </Form.Item>
              <Form.Item name={['part', 'preDay']} label={<FormattedMessage id="pages.LeadTime" />}>
                <Input suffix={<FormattedMessage id="pages.Day" />} style={{ width: 200 }} />
              </Form.Item>
              <VendorSelect
                required={false}
                showSearch={true}
                width={200}
                name={['part', 'vendorNum']}
                label={<FormattedMessage id="pages.default.vendor" />}
              />
            </TabPane>
            <TabPane tab={<FormattedMessage id="pages.revision" />} key="3">
              <Form.Item label={<FormattedMessage id="pages.revision" />} style={{ marginBottom: 0 }}>
                <Input.Group compact>
                  <Form.Item name={['partRev', 'revisionNum']}>
                    <Select
                      style={{ width: 150 }}
                      placeholder={<FormattedMessage id="pages.revision.select" />}
                      showSearch
                      onChange={handleRevChange}
                    >
                      {optionPartRevItem}
                    </Select>
                  </Form.Item>
                  <Form.Item name={['partRev', 'revShortDesc']}>
                    <Input placeholder={intl.formatMessage({ id: 'pages.revision.abbreviation' })} />
                  </Form.Item>
                </Input.Group>
              </Form.Item>
              <Form.Item
                name={['partRev', 'revDescription']}
                label={<FormattedMessage id="pages.RevisionDescription" />}
              >
                <Input />
              </Form.Item>

              <Form.Item
                name={['partRev', 'effectiveDate']}
                label={<FormattedMessage id="pages.effectiveDate" />}
              >
                <DatePicker />
              </Form.Item>
              <Form.Item
                name={['partRev', 'approved']}
                label={<FormattedMessage id="pages.approved" />}
                valuePropName="checked"
              >
                <Checkbox />
              </Form.Item>
              <Form.Item
                name={['partRev', 'approvedDate']}
                label={<FormattedMessage id="pages.approvedDate" />}
              >
                <DatePicker disabled={true} />
              </Form.Item>
              <Form.Item name={['partRev', 'id']} label="ID" style={{ display: 'none' }}>
                <Input />
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 5 }}>
                <Button block type="dashed" icon={<PlusOutlined />} onClick={createNewRev}>
                  <span>
                    <FormattedMessage id="pages.New Revision" />
                  </span>
                </Button>
              </Form.Item>
            </TabPane>
            <TabPane tab={<FormattedMessage id="pages.Substitute" />} key="4">
              <Form.Item name={['part', 'xPartNum']} label={<FormattedMessage id="pages.xPartNum" />}>
                <Input style={{ width: 200 }} />
              </Form.Item>
              <Form.Item
                name={['part', 'xPartDescription']}
                label={<FormattedMessage id="pages.xPartDescription" />}
              >
                <Input.TextArea disabled />
              </Form.Item>
            </TabPane>
            <TabPane tab={<FormattedMessage id="pages.others" />} key="5">
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item label={<FormattedMessage id="pages.Size" />} style={{ marginBottom: 0 }}>
                    <Input.Group compact>
                      <Form.Item name={['part', 'partLength']}>
                        <InputNumber step={0.1} placeholder="长" />
                      </Form.Item>
                      <Form.Item name={['part', 'partWidth']}>
                        <InputNumber step={0.1} placeholder="宽" />
                      </Form.Item>
                      <Form.Item name={['part', 'partHeight']}>
                        <InputNumber step={0.1} placeholder="高" />
                      </Form.Item>
                    </Input.Group>
                  </Form.Item>
                  <Form.Item
                    name={['part', 'diameter']}
                    label={<FormattedMessage id="pages.diameter" />}
                  >
                    <InputNumber step={0.1} />
                  </Form.Item>
                  <Form.Item name={['part', 'gravity']} label={<FormattedMessage id="pages.gravity" />}>
                    <InputNumber step={0.1} />
                  </Form.Item>
                  <Form.Item
                    name={['part', 'netVolume']}
                    label={<FormattedMessage id="pages.netVolume" />}
                  >
                    <InputNumber step={0.1} />
                  </Form.Item>
                  <Form.Item
                    name={['part', 'grossWeight']}
                    label={<FormattedMessage id="pages.grossWeight" />}
                  >
                    <InputNumber step={0.1} />
                  </Form.Item>
                  <Form.Item
                    name={['part', 'netWeight']}
                    label={<FormattedMessage id="pages.netWeight" />}
                  >
                    <InputNumber step={0.1} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <CateComp
                    layout="IUM"
                    label={<FormattedMessage id="pages.PUM" />}
                    width={100}
                    name={['part', 'pum']}
                    placeholder="PUM"
                  />
                  <CateComp
                    layout="IUM"
                    label={<FormattedMessage id="pages.SalesUM" />}
                    width={100}
                    name={['part', 'salesUM']}
                    placeholder="SalesUM"
                  />
                  <Form.Item
                    name={['part', 'custPartNum']}
                    label={<FormattedMessage id="pages.CustomerPartNum" />}
                  >
                    <Input style={{ width: 200 }} />
                  </Form.Item>
                  <Form.Item
                    name={['part', 'custPartDesc']}
                    label={<FormattedMessage id="pages.CustomerPartDesc" />}
                  >
                    <Input.TextArea style={{ width: 400 }} />
                  </Form.Item>
                </Col>
              </Row>
            </TabPane>
          </Tabs>
        </Card>
      </Form>
      <Modal
        title={<FormattedMessage id="pages.Vendor.Edit" />}
        width={1000}
        visible={visible2}
        destroyOnClose={true}
        onCancel={closeModal2}
        footer={false}
      >
        <VendorQuick />
      </Modal>

      <Modal
        title={<FormattedMessage id="pages.Picture.Select" />}
        visible={visible4}
        destroyOnClose={true}
        onCancel={() => setVisible4(false)}
        width={750}
        footer={false}
      >
        <ImgQuick
          clickMultiFun={(val: any) => clickMultiFun(val)}
          ext=".jpg,.jpeg,.png,.gif"
        />
      </Modal>
    </PageHeaderWrapper>
  );
};

export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
